<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>个人中心</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="/mobile/css/public.css">
    <link rel="stylesheet" href="/mobile/dist/css/sm.min.css">
    <link rel="stylesheet" href="/mobile/css/userCenter.css">

</head>
<body>
<div class="page page-current" id="userCenter">
    <header class="bar bar-nav">
        <a class="icon icon-left pull-left back"></a>
        <h1 class="title">个人中心</h1>
    </header>
    <div class="content infinite-scroll">
        <!-- 顶部 -->
        <div class="bg-white">
            <!-- 设置 -->
            <br>
            <!-- 用户信息 -->
            <div class="user-info flex flex-between">
                <div class="avatar">
                    <img  id="portraitUri">
                </div>

                <div class="info-right flex-1 flex flex-col flex-center">
                    <div class="user-name flex font-16">
                        <span id="nickname"></span>
                        <div class="user-level flex">
                            <img src="/mobile/img/u14.png">
                            <img src="/mobile/img/u10.png"  class="ax-left">
                            <img src="/mobile/img/u12.png" class="ax-right">
                            <div class="level-text">
                                <span>Lv</span>
                                <span>11</span>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="user-desc font-14">
                        <span>这是用户描述</span>
                    </div> -->
                </div>
            </div>

        </div>
        <!-- 开通VIP -->
        <!-- <a class="m-section public-mt" href="">
            <span>开通VIP会员</span>
            <span class="icon icon-right"></span>
        </a> -->
        <!-- 分享代理等 -->
        <div class="share-box">

            <a class="action" style="margin-top: 0.5rem;" href="/mobile/Index/invit">
                <div>邀请赚钱</div>
                <div class="sm-tips">
                    <span>推广用户即可分成</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span>已推广0</span>
                </div>
            </a>
            <a class="action" style="margin-top: 0.5rem;" href="/mobile/bank.php">
                <div>绑定银行卡</div>
                <div class="sm-tips">
                    <span>绑定卡片&nbsp;<span id="bank">0</span></span>&nbsp;&nbsp;&nbsp;&nbsp;

                </div>
            </a>
        </div>
        <!-- grid宫格 -->
        <div class="grid-box bg-white" id="gridBox"></div>
        <!-- 更多 -->
        <div class="section-box public-mt" id="sectionBox"></div>
        <!-- 占位元素 -->
        <div class="foot-status-bar"></div>

    </div>
</div>

<script src='http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
<script src="/mobile/js/config.js"></script>
<script src='/mobile/dist/js/sm.js'></script>
<script type="text/javascript">
    $(document).ready(function() {
        loadGridHtml(gridList, 3)
        loadSectionHtml(sectionList)
        /**
         * 生成宫格view
         * @param {Object} datas
         * @param {Object} column 列数
         */
        function loadGridHtml(datas, column) {
            var gridHtml = '', width = Math.floor(100/column), rows = Math.ceil( datas.length/column );
            //重新整理数据
            var newGrids = [];
            for (var i = 0; i < rows; i++) {
                var grids = datas.slice(i*column, (i+1)*column)
                newGrids.push(grids)
            }
            //遍历新数据生成html
            newGrids.forEach(function(out,i){
                var itemHtml = '';
                out.forEach(function(gridItem,j){
                    itemHtml += `
                                <a class="col-${width} grid-item" href="${gridItem.path}">
                                    <img src="/mobile/img/u60.png">
                                    <span class="sm-tips">${gridItem.name}</span>
                                </a>
                            `
                })
                gridHtml += `<div class="row">${itemHtml}</div>`
            })
            $("#gridBox").html(gridHtml)
        }
        $.post('/mobile/Index/getuserinfo', {

        }, function (res) {
            console.log(res);
            var data = res.data;
            $("#portraitUri").attr('src',data.portraitUri);
            $("#nickname").text(data.nickname);
        }, 'json');
        /**
         * 生成底部view
         * @param {Object} datas
         */
        function loadSectionHtml(datas) {
            var sectionHtml = ''
            datas.forEach(function(item){
                sectionHtml += `
                            <a class="m-section" href="${item.path}">
                                <span>${item.label}</span>
                                <div>
                                    <span class="sm-label">${item.value}</span>
                                    <span class="icon icon-right"></span>
                                </div>
                            </a>
                        `
            })
            $("#sectionBox").html(sectionHtml)
        }
    });

    var gridList = [
        {name: '我的钱包',icon: '',path: ''},

        {name: '收益中心',icon: '',path: ''},

        {name: '消息通知',icon: '',path: ''},
    ]
    var sectionList = [

        {label:'意见反馈', value:'', path:''}
    ]
</script>
</body>
</html>